<template>
  <view class="cat-del">
    <view class="but"> <button class="but1" @click="back">完成</button> </view>
    <uv-checkbox-group @change="updateSelection(event)" shape="circle">
      <block v-for="item in items" :key="item.id">
        <uv-checkbox
          :value="item.id"
          :checked="item.selected"
          activeColor="#f37021"
        >
          <view class="product-item-container">
            <view class="product-item">
              <image :src="item.image" class="product-image" />
              <view class="product-info">
                <view>{{ item.name }}</view>
                <view style="color: red; margin-top: 40">
                  ￥{{ (item.price * item.quantity).toFixed(2) }}
                </view>
              </view>
            </view>
            <view class="product-quantity">
              <uv-number-box
                v-model="item.quantity"
                @change="updatePrice"
              ></uv-number-box>
            </view>
          </view>
        </uv-checkbox>
      </block>
    </uv-checkbox-group>
    <view class="footer">
      <view class="select-all">
        <uv-checkbox-group shape="circle">
          <uv-checkbox
          activeColor="#f37021"
          :checked="isAllSelected"
          @change="handleSelectAll"
          label="全选"
        ></uv-checkbox>
        </uv-checkbox-group>
        
      </view>
      <view class="total">
        <button class="checkout-btn" @tap="deleteSelected">删除</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          name: "产品名称",
          price: 121.0,
          quantity: 0,
          image: "https://picsum.photos/200/300",
          selected: false, // Initialize selected state
        },
        {
          id: 2,
          name: "产品名称 2",
          price: 100.0,
          quantity: 0,
          image: "https://picsum.photos/200/300",
          selected: false, // Initialize selected state
        },
        // 更多产品...
      ],
      isAllSelected: false,
    };
  },
  methods: {
    back() {
      uni.switchTab({
        url: '/pages/cat/cat'
      })
    },
    updateSelection(event) {
      const selectedIds = event.detail.value; // 使用 ID
      this.items.forEach((item) => {
        item.selected = selectedIds.includes(item.id.toString()); // 判断选中状态
      });
      this.isAllSelected = selectedIds.length === this.items.length;
    },
    handleSelectAll() {
      this.isAllSelected = !this.isAllSelected;
      this.items.forEach((item) => {
        item.selected = this.isAllSelected; // 更新商品的选中状态
      });
    },
    updatePrice() {
      // 根据需求更新价格逻辑
    },
    deleteSelected() {
      // 根据 ID 过滤未选中的项目（保留未选中的商品）
      this.items = this.items.filter((item) => !item.selected);
      this.isAllSelected = false; // 清空全选状态
    },
  },
};
</script>

<style>
@import url(./cat-d.css);
</style>
